<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tags Input</title>
    <link rel="stylesheet" href="../../resources/css/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="../../resources/css/plugins/bootstrapTagsInput/bootstrap-tagsinput.css">
    <style>
        .bootstrap-tagsinput {
            display: block;
        }
        .bootstrap-tagsinput .tag {
            display: inline-block;
            margin: 0.4em 0;
            font-size: 1.1em;
        }
    </style>
</head>
<body>
<div class="container">
    <p>小</p>
    <div id="small"></div>
    <p>大</p>
    <div id="large"></div>
    <p>中</p>
    <div id="medium"></div>
    <p>不能超过3个</p>
    <div id="maxNumTags"></div>
    <p>下拉选择</p>
    <div id="suggestOnClick"></div>
    <p>readOnly</p>
    <div id="readOnly"></div>
</div>
<div class="container" style="margin: 50px auto;">
    <p><input type="text" id="input"/></p>
    <p><button class="btn btn-default" id="showInfo">显示信息</button></p>
    <div id="info" style="margin: 10px 0;"></div>
</div>

<div id="modal-add" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="tname" class="col-sm-2 control-label">名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="tname" placeholder="请输入名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="tcontent" class="col-sm-2 control-label">内容</label>
                        <div class="col-sm-10">
                            <textarea id="tcontent" rows="5" class="form-control" placeholder="请输入内容"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="btn-add">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div id="modal-change" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="tname" class="col-sm-2 control-label">名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="tname" placeholder="请输入名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="tcontent" class="col-sm-2 control-label">内容</label>
                        <div class="col-sm-10">
                            <textarea id="tcontent" rows="5" class="form-control" placeholder="请输入内容"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="btn-change">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src="../../resources/js/jquery-2.1.1.js"></script>
<script src="../../resources/js/bootstrap/bootstrap.min.js"></script>
<script src="../../resources/js/plugins/bootstrapTagsInput/bootstrap-tagsinput.js"></script>
<script src="../../resources/js/plugins/bootstrapTagsInput/bootstrap-tags.js"></script>
<script src="tagsInput.js"></script>
<script>
    $(function() {
        $('#input').initTagsInput();

        $('#showInfo').on('click', function() {
            $('#info').html('<pre>' + $('#input').val() + '<br/>' + $('#input').tagsinput('items') + '</pre>');

            console.log($('#input').val());
            console.log($('#input').tagsinput('items'));
        });
        $("#small").tags({
            tagSize: "sm",
            suggestions: ["alpha", "bravo", "charlie", "delta", "echo", "foxtrot", "golf", "hotel", "india"],
            tagData: ["欧泊恩", "自行车吗"]
        });
        $("#large").tags({
            tagSize: "lg",
            suggestions: ["alpha", "bravo", "charlie", "delta", "echo", "foxtrot", "golf", "hotel", "india"],
            tagData: ["欧泊恩", "自行车吗"]
        });
        $("#medium").tags({
            suggestions: ["alpha", "bravo", "charlie", "delta", "echo", "foxtrot", "golf", "hotel", "india"],
            tagData: ["欧泊恩", "自行车吗"]
        });
        $("#readOnly").tags({
            readOnly: true,
            tagData: ["欧泊恩", "自行车吗"]
        });
        $("#suggestOnClick").tags({
            restrictTo: ["欧泊恩", "自行车吗", "啊深V企鹅", "瞎吹人人", "大学城", "驱蚊草", "安卓v", "代付款", "请问嚄"],
            suggestions: ["欧泊恩", "自行车吗", "啊深V企鹅", "瞎吹人人", "大学城", "驱蚊草", "安卓v", "代付款", "请问嚄"],
            promptText: "点击这里增加",
            maxNumTags:10,
            suggestOnClick: true
        });
        $("#maxNumTags").tags({
            suggestions: ["欧泊恩", "自行车吗", "啊深V企鹅", "瞎吹人人", "大学城", "驱蚊草", "安卓v", "代付款", "请问嚄"],
            tagData: ["欧泊恩", "自行车吗", "啊深V企鹅"],
            maxNumTags: 3
        });
    });
</script>
</body>
</html>